1 files changed, 41 insertions, 0 deletions
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionModal.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionModal.tsx
new file mode 100644
index 0000000..d658038
--- /dev/null
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionModal.tsx
@@ -0,0 +1,41 @@
+import { Column, Dialog, Modal, type ModalProps } from '@umami/react-zen';
+import { SessionProfile } from '@/app/(main)/websites/[websiteId]/sessions/SessionProfile';
+import { useNavigation } from '@/components/hooks';
+
+export interface SessionModalProps extends ModalProps {
+  websiteId: string;
+}
+
+export function SessionModal({ websiteId, ...props }: SessionModalProps) {
+  const {
+    router,
+    query: { session },
+    updateParams,
+  } = useNavigation();
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      router.push(updateParams({ session: undefined }));
+    }
+  };
+
+  return (
+    <Modal
+      placement="bottom"
+      offset="80px"
+      isOpen={!!session}
+      onOpenChange={handleOpenChange}
+      isDismissable
+      {...props}
+    >
+      <Column height="100%" maxWidth="1320px" style={{ margin: '0 auto' }}>
+        <Dialog variant="sheet">
+          {({ close }) => (
+            <Column padding="6">
+              <SessionProfile websiteId={websiteId} sessionId={session} onClose={() => close()} />
+            </Column>
+          )}
+        </Dialog>
+      </Column>
+    </Modal>
+  );
+}